<template>
  <div>
    <photo-view :list="list" @close="close" />
    <el-scrollbar :height="height" ref="scrollbarRef">
      <p class="pinformation">采集与描述</p>
      <span class="fileNameHover" style="margin-left: 10px;" v-if="form.fileList.length"
        @click="list = form.fileList">{{ form.fileList[0].fileName }}</span>
      <span v-else style="margin-left: 10px">/</span>
      <p class="pinformation" style="margin-top: 10px;">采集与保存备注</p>
      <div style="font-size: 14px; margin-left: 10px; margin-bottom: 10px">
        {{ form.sampleRemark || "/" }}
      </div>
      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">采集与保存</p>
        <p class="totalStyle">共 {{ form.sampleList.length }} 条数据</p>
      </el-row>
      <el-table :data="form.sampleList" ref="cjTableRef" class="business" border style="margin-bottom: 5px">
        <el-table-column label="检测项目" align="center" width="150">
          <template #default="scope">
            <el-tooltip class="box-item" effect="customized" placement="top-start">
              <template #content>
                <span v-if="scope.row.jcxmNames" v-html="transformation(getJcxmName(scope.row.jcxmNames))"></span>
              </template>
              <div style="
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                " v-if="scope.row.jcxmNames" v-html="transformation(getJcxmName(scope.row.jcxmNames))"></div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="采集/容器" align="center" width="100">
          <template #default="scope">
            {{ proxy.getItemByArrays(sys_sample_container, "value", scope.row.containerTypeIds, "label") }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="机构默认容器" align="center" width="160">
          <template #default="scope">
            <dict-tag :options="sys_sample_container" :value="scope.row.orgContainer" />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="固定剂" align="center" prop="fixer" width="190">
          <template #default="scope">
            <dict-tag :options="sys_fixer" :value="scope.row.fixer" />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="固定剂要求" align="center" prop="fixerDesc" width="150">
          <template #default="scope">
            <dict-tag :options="sys_fixer_desc" :value="scope.row.fixerDesc" />
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="固定剂描述" align="center" prop="fixerRemark" width="200" />
        <el-table-column show-overflow-tooltip label="保存要求" align="center" prop="saveDesc" width="120" />
        <el-table-column show-overflow-tooltip label="保存时长" align="center" prop="saveTime" width="120" />
        <el-table-column show-overflow-tooltip label="保存时长单位" align="center" width="120">
          <template #default="scope">{{
            proxy.getItemByArray(unitList, "unitId", scope.row.unitId, "unitName")
          }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="流速" align="center" prop="rate" width="100" />
        <el-table-column show-overflow-tooltip label="流速单位" align="center" prop="rateUnitName" width="120" />
        <el-table-column show-overflow-tooltip label="采样时长" align="center" prop="collectTime" width="120" />
        <el-table-column show-overflow-tooltip label="采样时长单位" align="center" prop="collectUnitName" width="120" />
        <el-table-column show-overflow-tooltip label="采样体积" align="center" prop="volume" width="120" />
        <el-table-column show-overflow-tooltip label="采样体积单位" align="center" prop="volumeUnitName" width="120" />
        <el-table-column show-overflow-tooltip label="备注" align="center" prop="remark" width="120" />
        <el-table-column show-overflow-tooltip label="机构流速" align="center" prop="orgRate" width="100" />
        <el-table-column show-overflow-tooltip label="机构流速单位" align="center" prop="orgRateName" width="120" />
        <el-table-column show-overflow-tooltip label="机构采样时长" align="center" prop="orgCollectTime" width="110" />
        <el-table-column show-overflow-tooltip label="机构采样时长单位" align="center" prop="orgCollectName" width="150" />
        <el-table-column show-overflow-tooltip label="机构采样体积" align="center" prop="orgVolume" width="110" />
        <el-table-column show-overflow-tooltip label="机构采样体积单位" align="center" prop="orgVolumeName" width="150" />
        <el-table-column show-overflow-tooltip label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="success" icon="edit" @click="editOrgSing(scope)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">前处理描述</p>
        <p class="totalStyle">共 {{ form.handleDescList.length }} 条数据</p>
      </el-row>
      <el-table :data="form.handleDescList" class="business" border ref="handleTableRef" style="margin-bottom: 5px">
        <el-table-column show-overflow-tooltip label="前处理名称" align="center" prop="handleId">
          <template #default="scope">{{ getHandleMc(scope) }}</template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="前处理描述" align="center" prop="handleDesc" />
      </el-table>

      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">前处理截图</p>
        <p class="totalStyle">共 {{ form.handleFileList.length }} 条数据</p>
      </el-row>
      <el-table :data="form.handleFileList" class="business" border ref="handleFileTableRef">
        <el-table-column show-overflow-tooltip label="截图编号" align="center" prop="fileCode" width="220" />
        <el-table-column show-overflow-tooltip label="前处理名称" align="center" prop="params.handleMc" width="220" />
        <el-table-column show-overflow-tooltip label="截图名称" align="center">
          <template #default="scope">
            <span @click="list = scope.row.fileList" class="fileNameHover">{{ scope.row.fileMc }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <el-dialog :class="'el-dialog-theme3'" :title="title" v-model="open" @close="closeDialog"
      append-to-body draggable :close-on-click-modal="false">
      <el-form label-width="120" :model="subForm" ref="subJclbRef">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测项目：" prop="jcxmNames">
              <el-tooltip class="box-item" effect="customized" placement="top-start">
                <template #content>
                  <span v-html="transformation(subForm.jcxmNames)"></span>
                </template>
                <div v-html="transformation(subForm.jcxmNames)" v-if="subForm.jcxmNames" style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "></div>
                <div v-else>/</div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="采集/容器：">
          <span v-if="subForm.containerTypeIds">{{ proxy.getItemByArrays(sys_sample_container, "value",
            subForm.containerTypeIds, "label") }}</span>
          <span v-else>/</span>
        </el-form-item>
        <el-form-item label="固定剂：">
          <dict-tag :options="sys_fixer" :value="subForm.fixer" v-if="subForm.fixer" />
          <span v-else>/</span>
        </el-form-item>
        <el-form-item label="固定剂要求：">
          <dict-tag :options="sys_fixer_desc" :value="subForm.fixerDesc" v-if="subForm.fixerDesc" />
          <span v-else>/</span>
        </el-form-item>
        <el-form-item label="固定剂描述：">
          {{ subForm.fixerRemark || "/" }}
        </el-form-item>
        <el-form-item label="保存要求：">
          {{ subForm.saveDesc || "/" }}
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保存时长：">
              {{ subForm.saveTime || "/" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              {{
                proxy.getItemByArray(
                  unitList,
                  "unitId",
                  subForm.unitId,
                  "unitName"
                ) || "/"
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 流速 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="流速：">
              {{ subForm.rate || "/" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              <span v-html="transformation(getUnitName(subForm.rateUnit))" v-if="subForm.rateUnit"></span>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样时长 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="采样时长：">
              {{ subForm.collectTime || "/" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              {{
                proxy.getItemByArray(
                  unitList,
                  "unitId",
                  subForm.collectUnit,
                  "unitName"
                ) || "/"
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样体积 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="采样体积：">
              {{ subForm.volume || "/" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              <span v-html="transformation(getVolumeName(subForm.volumeUnit))" v-if="subForm.volumeUnit"></span>
              <span v-else>/</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样备注 -->
        <el-form-item label="采样备注：">
          {{ subForm.remark || "/" }}
        </el-form-item>
        <el-form-item label="机构默认容器：">
          <el-select v-model="subForm.orgContainer" filterable>
            <el-option v-for="dict in sys_sample_container" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
        <!-- 流速 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构流速：">
              <el-input clearable v-model.trim="subForm.orgRate" oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="subForm.orgRate = $event.target.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              <el-select clearable v-model="subForm.orgRateUnit" filterable style="width: 100%">
                <el-option v-for="item in rateUnitList" :key="item.unitId" :value="item.unitId"
                  :label="item.unitName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样时长 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构采样时长：">
              <el-input clearable v-model.trim="subForm.orgCollectTime" oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="subForm.orgCollectTime = $event.target.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              <el-select clearable v-model="subForm.orgCollectUnit" filterable style="width: 100%">
                <el-option v-for="item in unitList" :key="item.unitId" :value="item.unitId"
                  :label="item.unitName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样体积 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="机构采样体积：">
              <el-input clearable v-model.trim="subForm.orgVolume" oninput="value=value.replace(/[^0-9.]/g,'')"
                @blur="subForm.orgVolume = $event.target.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：">
              <el-select clearable v-model="subForm.orgVolumeUnit" filterable style="width: 100%">
                <el-option v-for="item in volumeUnitList" :key="item.unitId" :value="item.unitId" :label="item.unitName">
                  <span v-html="transformation(item.unitName)"></span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 采样备注 -->
        <el-form-item label="机构采样备注：">
          <el-input clearable type="textarea" placeholder :autosize="{ minRows: 3, maxRows: 7 }"
            v-model="subForm.orgRemark" maxlength="500" show-word-limit />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" @click="orgSave">保存</el-button>
          <el-button type="danger" @click="open = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { allListJclb } from "@/api/store/jclb";
import { getUnitList } from "@/api/store/unit";
import {
  gethandleList,
  getChangeJcxmList,
  addSample,
  getSample,
} from "@/api/store/method";
import useMethodStore from "@/store/modules/method";

const { proxy } = getCurrentInstance();

const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const sampleForm = computed(() => methodStore.sampleForm);

const { sys_sample_container, sys_fixer, sys_fixer_desc } = proxy.useShareDict(
  "sys_sample_container",
  "sys_fixer",
  "sys_fixer_desc"
);

const title = ref("");
const open = ref(false);
const jcList = ref([]);
const unitList = ref([]);
const qclList = ref([]);

const data = reactive({
  subForm: {
    fileList: [],
    mJIds: [],
  },
  form: {
    handleFileList: [],
    sampleList: [],
    handleDescList: [],
    fileList: [],
  },
});
const { form, subForm } = toRefs(data);

watch(sampleForm, () => {
  form.value = sampleForm.value;
});

allListJclb().then((res) => {
  jcList.value = res.data;
});

const volumeUnitList = ref([]);
const rateUnitList = ref([]);
getUnitList({ unitGroups: [4, 0, 6] }).then((res) => {
  res.data.forEach((item) => {
    if (item.unitGroup == 4) {
      unitList.value.push(item);
    } else if (item.unitGroup == 0) {
      volumeUnitList.value.push(item);
    } else if (item.unitGroup == 6) {
      rateUnitList.value.push(item);
    }
  });
});

function handleList() {
  gethandleList(methodId.value).then((res) => {
    qclList.value = res.data;
  });
}

function getHandleMc(scope) {
  let handleMc;
  qclList.value.find((item) => {
    if (scope.row.handleId == item.handleId) {
      handleMc = item.handleMc;
      return;
    }
  });
  return handleMc;
}

function closeDialog() {
  subForm.value = { fileList: [] };
  if (proxy.$refs["subJclbRef"]) {
    proxy.$refs["subJclbRef"].clearValidate();
  }
  if (proxy.$refs["listRef"]) {
    proxy.$refs["listRef"].clearValidate();
  }
}

defineExpose({
  handleList,
});


function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

function getJcxmName(row) {
  return row.join("、");
}

function getUnitName(row) {
  return proxy.getItemByArray(rateUnitList.value, "unitId", row, "unitName");
}

function getVolumeName(row) {
  return proxy.getItemByArray(volumeUnitList.value, "unitId", row, "unitName");
}

function getHUnitName(row) {
  return proxy.getItemByArray(unitList.value, "unitId", row, "unitName");
}

function editOrgSing(scope) {
  open.value = true;
  title.value = "采集与保存";
  form.value.sampleList[scope.$index] = JSON.parse(JSON.stringify(scope.row));
  subForm.value = scope.row;
  subForm.value.jcxmNames = getJcxmName(subForm.value.jcxmNames);
}

function orgSave() {
  let temp = {
    id: subForm.value.id,
    methodId: subForm.value.methodId,
    sampleId: subForm.value.sampleId,
    orgRate: subForm.value.orgRate,
    orgRateUnit: subForm.value.orgRateUnit,
    orgCollectTime: subForm.value.orgCollectTime,
    orgCollectUnit: subForm.value.orgCollectUnit,
    orgVolume: subForm.value.orgVolume,
    orgVolumeUnit: subForm.value.orgVolumeUnit,
    orgContainer: subForm.value.orgContainer,
    orgRemark: subForm.value.orgRemark,
  };
  addSample(temp).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
    open.value = false;
    getSample(methodId.value).then((res) => {
      form.value = res.data;
    });
  });
}

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})

onUpdated(() => {
  getHeight()
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});

const list = ref([])
function close() {
  list.value = []
}
</script>

<style></style>
